<!--
 * @Author: windys
 * @Description: 模态
 * @Date: 2021-12-10 09:51:16
-->

<template>
    <a-modal
        v-model:visible="show"
        :title="title"
        @ok="handleOk"
        @cancel="handleCancel"
        :ok-text="okText"
        :cancel-text="cancelText"
        :closable="closable"
        :confirmLoading="confirmLoading"
        :destroyOnClose="destroyOnClose"
        :width="width"
    >
        <slot></slot>
        <template #footer>
            <slot name="diyfooter"></slot>
        </template>
    </a-modal>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
const props = {
    title: {
        type: String,
        default: () => '标题'
    },
    okText: {
        type: String,
        default: () => '确认'
    },
    cancelText: {
        type: String,
        default: () => '取消'
    },
    closable: {
        type: Boolean,
        default: () => true
    },
    confirmLoading: {
        type: Boolean,
        default: () => false
    },
    destroyOnClose: {
        type: Boolean,
        default: () => true
    },
    width: {
        type: [String, Number],
        default: () => 520
    }
}
export default defineComponent({
    props,
    setup(props, { emit, attrs, slots }) {
        const show = ref<boolean>(false);

        const showModal = () => {
            show.value = true;
        };
        const open = () => {
            show.value = true;
        }
        const close = () => {
            show.value = false;
        }
        const handleOk = (e: MouseEvent) => {
            console.log(e);
            emit('handleOk')
        };
        const handleCancel = () => {
            show.value = false;
            emit('handleCancel')
        }
        return {
            show,
            open,
            close,
            handleCancel,
            handleOk,
            showModal
        };
    },
});
</script>

